<template>
  <div>
    <div class="box">
      <div class="boxs" v-for="(item,index) in reviewData" :key="index">
        <div class="left">
          <div class="top">
            <img src="../../images/Yasuo.png" alt />
            <div class="name">
              <div>快乐风男</div>
              <div class="red">LV.100000</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="below">
            <div class="content">{{item.content}}</div>
            <div class="img">
              <div class="images" v-for="(item1,index1) in item.pics" :key="index1">
                <img :src="$axios.defaults.baseURL+item1.url" alt />
              </div>
            </div>
            <div class="xin">
              <i
                class="el-rate__icon el-icon-star-on"
                v-for="(item2,index2) in item.score"
                :key="index2"
                @click="dianji(item)"
              ></i>
              <span>2020-9-10</span>
            </div>

            <!-- 回复评论 -->
            <div class="replyTo">
              <div class="comments" v-for="(item1,index1) in item.followed" :key="index1">
                <div class="top">
                  <img src="../../images/Zed.png" alt />
                  <span>儿童节:&nbsp;</span>
                  <div>{{item1.content}}</div>
                  <span class="huifu">回复</span>
                </div>
                <div class="date">2020-9-10</div>
              </div>
            </div>

            <!-- 回复评论 -->

            <el-input placeholder="添加回复..." v-model="inputVal"></el-input>
            <el-button type="primary" plain>回复</el-button>
          </div>
          <!-- <div class="bton">回复</div> -->
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reviewData: [], // 总数据
      dialogImageUrl: "",
      dialogVisible: false,
      inputVal: "", //评论输入框
      diguiData: [],
      pageList: [], // 总数据
      pageIndex: 2, // 当前页数
      pageSize: 5, // 显示条数
    };
  },
  mounted() {
    this.$axios({
      url: "/hotels/comments",
    }).then((res) => {
      this.reviewData = res.data.data;
      this.diguiData = res.data.data[0].followed;
      console.log(this.reviewData);
      console.log(this.diguiData);
    });
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    dianji(item) {
      console.log(item);
    },

    // 切换条数时触发
    handleSizeChange(value) {
      this.pageSize = value;
      this.pageIndex = 1;
    },

    // 切换页数时触发
    handleCurrentChange(value) {
      this.pageIndex = value;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  border: solid 1px #dddddd;

  .boxs {
    // margin-top: 30px;
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 20px;
    &:last-child {
      border-bottom: none;
    }
    .left {
      width: 20%;
      margin-right: 15px;
      .top {
        display: flex;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .name {
          text-align: left;
          span {
            color: #666;
          }
          .red {
            color: red;
          }
        }
        .date {
          color: #999;
        }
      }
    }
    .right {
      width: 80%;
      .below {
        .img {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .images {
            width: 33%;
            img {
              width: 100%;
              height: 150px;
              border-radius: 5px;
            }
          }
        }
        .xin {
          margin: 10px 0 10px 0;
          .el-icon-star-on {
            color: rgb(247, 186, 42);
          }
        }
        .el-button {
          display: flex;
          float: right;

          height: 15px;
          align-items: center;
          margin-top: 5px;
        }
      }
    }
  }
}
.block {
  text-align: right;
  margin: 15px 50px 15px 0;
}
.replyTo {
  margin-bottom: 20px;
  .comments {
    font-size: 14px;
    border-bottom: solid 1px #eeeeee;
    // background-color: #eee;
    margin: 10px 0;
    .top {
      display: flex;
      align-items: center;
      img {
        width: 15px;
        height: 15px;
        border-radius: 50%;
      }
      span {
        color: #ff9900;
      }
      .huifu {
        margin-left: 10px;
      }
    }
    .date {
      margin-bottom: 5px;
    }
  }
}
</style>